<template>
  <view class="review-popup" v-if="show">
    <view class="popup-mask" @tap="close"></view>
    <view class="popup-content">
      <view class="popup-header">
        <text class="title">评价商品</text>
        <text class="close-btn" @tap="close">×</text>
      </view>
      
      <view class="rating-section">
        <text class="rating-label">商品评分</text>
        <view class="stars">
          <text 
            v-for="index in 5" 
            :key="index"
            class="star"
            :class="{ active: index <= rating }"
            @tap="setRating(index)"
          >★</text>
        </view>
      </view>

      <view class="content-section">
        <textarea
          v-model="content"
          class="review-content"
          placeholder="请输入您的评价内容"
          maxlength="200"
        />
        <text class="word-count">{{ content.length }}/200</text>
      </view>

      <button 
        class="submit-btn" 
        :disabled="!isValid || submitting"
        @tap="submitReview"
      >
        {{ submitting ? '提交中...' : '提交评价' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { addProductReviewUsingPost } from '@/backend/productReviewController';
import type Uni from '@dcloudio/uni-app';

declare const uni: Uni;

const props = defineProps<{
  show: boolean;
  orderId?: number;
}>();

const emit = defineEmits(['update:show', 'success']);

const rating = ref(0);
const content = ref('');
const submitting = ref(false);

// 表单验证
const isValid = computed(() => {
  return rating.value > 0 && content.value.trim().length > 0;
});

// 设置评分
const setRating = (value: number) => {
  rating.value = value;
};

// 关闭弹窗
const close = () => {
  emit('update:show', false);
  // 重置表单
  rating.value = 0;
  content.value = '';
};

// 提交评价
const submitReview = async () => {
  if (!isValid.value || !props.orderId) return;

  submitting.value = true;
  try {
    const res = await addProductReviewUsingPost({
      orderId: props.orderId,
      rating: rating.value,
      content: content.value.trim()
    });

    if (res.code === 0) {
      uni.showToast({
        title: '评价成功',
        icon: 'success'
      });
      emit('success');
      close();
    } else {
      uni.showToast({
        title: res.message || '评价失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('提交评价失败：', error);
    uni.showToast({
      title: '评价失败，请重试',
      icon: 'none'
    });
  } finally {
    submitting.value = false;
  }
};
</script>

<style scoped>
.review-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 40rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.rating-section {
  margin-bottom: 40rpx;
}

.rating-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.stars {
  display: flex;
  gap: 20rpx;
}

.star {
  font-size: 48rpx;
  color: #ddd;
}

.star.active {
  color: #ff9800;
}

.content-section {
  margin-bottom: 40rpx;
}

.review-content {
  width: 100%;
  height: 200rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin-bottom: 12rpx;
}

.word-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn:disabled {
  opacity: 0.6;
}
</style> 